<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .a{
                width: 500px;
                height: 500px;
                border: 5px solid black;
                margin: 50px auto 0;
                position: relative;
            }
            .b{
                width: 300px;
                height: 300px;
                background: red;
                margin: 75px;
                /*position: relative;*/
            }
            .c{
                /*
                绝对定位：元素脱离文档流,相对于距离自己最近的定位父级元素定位
                */
                position: absolute;
                width: 100px;
                height: 100px;
                background: yellow;
                right: 0;
                top: 0;
            }

            /*
            网页布局的嵌套规则：
            1.块级元素和块级元素平级，行内元素和行内元素平级

            2.块级元素可以包换行内元素和部分块级元素，行内元素可以包含其他行内元素，但不要包含块级元素

            3.有几个特殊的块级元素只能包含行内元素（内嵌元素），不能包含块级元素（h$,p ,dt）
            */

        </style>
    </head>
    <body>
    <div class="a">
        <div class="b">
            <div class="c"></div>
        </div>
    </div>
    </body>
</html>